<template>
	<view class="order-detal">
		<!-- 支付顶部图片 -->
		<view class="order-banner">
			<view class="banner-item">
				<view class="banner-text-2">
					<view>等待买家付款</view>
					<view>剩23小时20分自动关闭</view>
				</view>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner1.png"></image>
			</view>
			<view class="banner-item banner-text">
				<span>待使用</span>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner2.png"></image>
			</view>
			<view class="banner-item banner-text">
				<span>已关闭</span>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner3.png"></image>
			</view>
			<view class="banner-item banner-text">
				<span>待评价</span>
				<image src="https://www.innovationgloble.com/wxs/img/wx/order-banner4.png"></image>
			</view>
		</view>
		<view class="order-content">
			<view class="order-price">
				<view>
					
				</view>
				<view class="price-info">
					<view class="price-info-1">
						<view>总额</view>
						<view>¥2000.00</view>
					</view>
					<view class="price-info-1">
						<view>优惠</view>
						<view>¥0.00</view>
					</view>
					<view class="price-info-2">
						<view>实付款</view>
						<view>
							<span>¥</span>
							2000.00
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="base-info">
				<view class="base-info-1">
					订单信息
				</view>
				<view class="base-info-2">
					<view class="info-2-l">订单编号：</view>
					<view class="info-2-r">1222222222222</view>
				</view>
				<view class="base-info-2">
					<view class="info-2-l">支付方式：</view>
					<view class="info-2-r">在线支付</view>
				</view>
				<view class="base-info-2">
					<view class="info-2-l">下单时间：</view>
					<view class="info-2-r">2020-05-20 08:17:00</view>
				</view>
				<view class="base-info-2">
					<view class="info-2-l">支付时间：</view>
					<view class="info-2-r">2020-05-20 08:17:00</view>
				</view>
				<view class="base-info-5">
					<view>联系商家</view>
				</view>
			</view>
			<!-- 咨询信息 -->
			<view class="">
				
			</view>
			<!-- 待付款底部 -->
			<view class="order-bottom" v-if="orderType===1">
				<button class="calcel">取消订单</button>
				<button class="pay">立即支付</button>
			</view>
			<!-- 待使用底部 -->
			<view class="order-bottom" v-if="orderType===2">
				<button class="after-sale">申请售后</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderType:1,
				payState:1
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.order-detal {
		min-height: 100vh;
		.order-content {
			background-color: #F5F6F9;
		}
		.order-banner {
			.banner-item {
				width: 100%;
				height: 200upx;
				position: relative;
				image {
					width: 100%;
					height: 200upx;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}
			}
			.banner-text-2 {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 71upx;
				>view:nth-child(1){
					font-size:32upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,255,255,1);
					line-height:45upx;
				}
				>view:nth-child(2){
					font-size:24upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,255,255,1);
					line-height:33upx;
				}
			}
			.banner-text {
               span {
				  font-size:32upx;
				  font-family:PingFangSC-Regular,PingFang SC;
				  font-weight:400;
				  color:rgba(255,255,255,1);
				  position: absolute;
				  top: 50%;
				  transform: translateY(-50%);
				  left: 71upx;
			   }
			}
		}
		.order-bottom {
			   position: fixed;
			   width:100%;
			   height:100upx;
			   background:rgba(255,255,255,1);
			   bottom: 0;
			   left: 0;
			   text-align: right;
			   padding: 25upx 9upx;
			   .pay {
				   width:162upx;
				   height:50upx;
				   background:rgba(255,255,255,1);
				   border-radius:29upx;
				   border:1upx solid #2A7DFA;
				   line-height: 50upx;
				   font-size:26upx;
				   font-family:PingFangSC-Regular,PingFang SC;
				   font-weight:400;
				   color:#2A7DFA;
				   display: inline-block;
				   margin-right: 21upx;
			   }
			   .calcel {
				   width:162upx;
				   height:50upx;
				   background:rgba(255,255,255,1);
				   border-radius:29upx;
				   border:1upx solid rgba(204,204,204,1);
				   line-height: 50upx;
				   font-size:26upx;
				   font-family:PingFangSC-Regular,PingFang SC;
				   font-weight:400;
				   color:rgba(78,78,78,1);
				   display: inline-block;
				   margin-right: 21upx;
			   }
			  .after-sale {
				  width:162upx;
				  height:50upx;
				  background:rgba(255,255,255,1);
				  border-radius:29upx;
				  border:1upx solid rgba(204,204,204,1);
				  line-height: 50upx;
				  font-size:26upx;
				  font-family:PingFangSC-Regular,PingFang SC;
				  font-weight:400;
				  color:rgba(78,78,78,1);
				  display: inline-block;
				  margin-right: 21upx;
			  }
		}
		.order-price {
			background-color: #FFFFFF;
			padding: 26upx 30upx;
			margin-bottom: 16upx;
			.price-info {
				.price-info-1 {
					display: flex;
					justify-content: space-between;
					>view:nth-child(1){
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(169,169,169,1);
					}
					>view:nth-child(2){
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(169,169,169,1);
					 }
				}
				.price-info-2 {
					display: flex;
					justify-content: space-between;
					>view:nth-child(1){
						font-size:26upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
					}
					>view:nth-child(2){
						font-size:34upx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(222,90,2,1);
						span {
							font-size: 26upx;
						}
					 }
				}
			}
		}
		.base-info {
			box-sizing: border-box;
			padding: 36upx 30upx;
			background-color: #FFFFFF;
			margin-bottom: 16upx;
			.base-info-1 {
				font-size:32upx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:32upx;
				margin-bottom: 36upx;
			}
			.base-info-2 {
				display: flex;
				margin-bottom: 30upx;
				.info-2-l {
					color: #757575;
					font-size: 26upx;
					line-height: 26upx;
				    margin-right: 6upx;
				}
				.info-2-r {
					color: #333333;
					font-size: 26upx;
					line-height: 26upx;
				}
			}
			.base-info-5 {
				height: 92upx;
				line-height: 92upx;
				border-top: 2upx solid #F4F4F4;
				text-align: center;
			 }
		}
	}
</style>
